﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

    <script type="text/javascript">

    try
    {
        for(var styleSheetIndex = 0; styleSheetIndex < window.parent.document.styleSheets.length; styleSheetIndex++)
        {
            var cssNode = document.createElement('style');
            cssNode.type = 'text/css';
            cssNode.rel = 'stylesheet';
            cssNode.media = 'screen';
            document.getElementsByTagName("head")[0].appendChild(cssNode);

            /* Get the style object after inserted in the document because is when it has all the methods necessary. */
            var styleSheet = document.styleSheets[0];

            var cssRules = (window.parent.document.styleSheets[styleSheetIndex].rules || window.parent.document.styleSheets[styleSheetIndex].cssRules);

            alert(cssRules.length);

            var index = 0;
            for(var cssRuleIndex = 0; cssRuleIndex < cssRules.length; cssRuleIndex++)
            {
                var cssRule = cssRules[cssRuleIndex];

                if(styleSheet.addRule)
                {
                    styleSheet.addRule(cssRule.selectorText, cssRule.style.cssText);
                }
                else if(styleSheet.insertRule)
                {
                    /* 
                        Do not forget the second parameter "index" never. It is not work without it.
                    With the zero value insert a new css rule. Do not override the first rule.
                        Use an autoincrement index because if all the rules are added at the same position
                    the overrided selectors does not work 100% correctly in browser Firefox, Zafari and Opera.
                    */
                    styleSheet.insertRule(cssRule.selectorText + "{" + cssRule.style.cssText + "}", index);
                    index++;
                }
            }
        }
    }
    catch(Error) { alert(Error.Message); }

    </script>
</head>
<body>
    <div class="Test"></div>
    <div class="Test2"></div>
    <div class="Test3"></div>
    <div class="Test4"></div>
</body>
</html>
